<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .image-box {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .image-item {
            position: relative;
            width: 500px;
            height: 400px;
            margin: 20px;
            border: 1px solid #eee;
            padding: 10px;
        }

        .image-item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .image-item .label {
            position: absolute;
            top: 0;
            right: 0;
            background-color: #ccc;
            padding: 4px 10px;
            font-size: 14px;
            color: #fff;
        }
    </style>


</head>

<body>
    <div style="display: flex; flex-direction: column; align-items: center; padding: 40px;">
        <input type="file" accpet="image/*" name="originalFile" id="originalFile">

        <div class="image-box" style="margin-top: 40px;">
            <div class="image-item">
                <img id="originalImage" src="" />
                <div class="label">原图(抠完的图)</div>
            </div>
            <div>
                <button onclick="toMaskData()">生成</button>
            </div>
            <div class="image-item">
                <img id="maskImage" src="" />
                <div class="label">Mask</div>
            </div>
        </div>
    </div>

<div>
获取美图抠图图片代码，扣完图后，在控制台执行
<pre >
var base64ToFile = (base64) => {
let arr = base64.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
}

// 根据文件类型添加相应的扩展名
let extension = '';
if (mime === 'image/jpeg') {
    extension = '.jpg';
} else if (mime === 'image/png') {
    extension = '.png';
} else if (mime === 'image/gif') {
    extension = '.gif';
}

return new File([u8arr], 'mask' + extension, { type: mime });
};

var canvas = document.querySelector('.SingleResultPreview_canvas__kHXix');  
var dataUrl = canvas.toDataURL();
var file = base64ToFile(dataUrl);
URL.createObjectURL(file);
</pre>

</div>

    <script src="https://www.shuiyinyun.com/themes/shuiyinyun-v3/public/libs/jquery-1.11.1.min.js"></script>
    <script>
        var originalImage, originalWidth, originalHeight;
        $("#originalFile").change(function () {
            let files = $(this).prop('files');
            if (files[0]) {
                let tempFilePath = URL.createObjectURL(files[0])
                console.log(tempFilePath)

                let image = new Image();
                image.src = tempFilePath;
                image.onload = function () {
                    originalWidth = image.width;
                    originalHeight = image.height;
                    originalImage = image;

                    $('#originalImage').attr('src', tempFilePath)
                };

            }
        })

        function toMaskData() {
            if (!originalImage) {
                return;
            }
            console.log('toMaskData')
            let originalCanvas = document.createElement('canvas'); // 用于绘制原始PNG图像
            let originalContext = originalCanvas.getContext('2d');

            let displayCanvas = document.createElement('canvas'); // 用于显示处理后的图像
            let displayContext = displayCanvas.getContext('2d');

            originalCanvas.width = originalWidth;
            originalCanvas.height = originalHeight;
            originalContext.drawImage(originalImage, 0, 0, originalWidth, originalHeight);

            // 在绘制前清空显示Canvas并填充为黑色
            displayCanvas.width = originalCanvas.width;
            displayCanvas.height = originalCanvas.height;
            displayContext.fillStyle = 'black';
            displayContext.fillRect(0, 0, displayCanvas.width, displayCanvas.height);

            // 获取原始Canvas上的图像像素数据，并遍历每个像素进行处理
            let imageData = originalContext.getImageData(0, 0, originalCanvas.width, originalCanvas.height);
            let data = imageData.data;

            for (let i = 0; i < data.length; i += 4) {
                let alpha = data[i + 3];

                if (alpha !== 0) {
                    // 如果像素不是完全透明的
                    data[i] = 255; // 设置红色通道为255（白色）
                    data[i + 1] = 255; // 设置绿色通道为255（白色）
                    data[i + 2] = 255; // 设置蓝色通道为255（白色）
                }
            }

            originalContext.putImageData(imageData, 0, 0);

            // 将处理后的图像绘制到显示Canvas上
            displayContext.drawImage(originalCanvas, 0, 0);
            let maskBase64 = displayCanvas.toDataURL('image/png');

            $('#maskImage').attr('src', maskBase64)
        }
    </script>
</body>

</html>